<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>雷达图的基本实现</title>
</head>

<body>

  <!-- 雷达图的实现步骤
    1、定义各个维度的最大值
        indicator:[{name:'易用性',max:'100'},{},.....]
    2、准备具体产品的数据
        data:[{name:'华为手机',value:[80,90,...]},{}]
    3、图表类型
        在series下设置type:radar
  -->
  <!-- 雷达图特点
    雷达图可以用来分析多个维度的数据与标准数据的对比情况
  -->
  <!-- 常用配置
    显示数据：label
    区域面积：areaStyle
    绘制类型：shape : 'circle/polygon'
  -->

  <div style="height: 600px;width: 700px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    // 准备数据
    var dataPhone = [{
      name: '易用性',
      max: 100
    }, {
      name: '功能',
      max: 100
    }, {
      name: '拍照',
      max: 100
    }, {
      name: '跑分',
      max: 100
    }, {
      name: '续航',
      max: 100
    }];
    // 配置
    var option = {
      radar: {
        // 定义各个维度的最大值
        indicator: dataPhone,
        // 定形状
        // shape: 'polygon'
      },
      series: [{
        type: 'radar',
        data: [{
          name: '华为手机',
          value: [80, 90, 80, 82, 90]
        }, {
          name: '中兴手机',
          value: [70, 80, 90, 80, 78]
        }],
        label: {
          show: true
        },
        // areaStyle: {}
      }],

    }
    mChart.setOption(option)
  </script>
</body>

</html>